<template>
  <div class="table-wrapper" :style="{height:height}">
    <el-table :data="list" style="width: 100%;padding-top: 15px;overflow:hidden;" ref="table" :min-height="height">
      <el-table-column v-for="item in column" :key="item.field" :label="item.label" :width="item.width" :align="item.align">
        <template slot-scope="scope">
          {{ scope.row[item.field]}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style scoped>
  .table-wrapper{
    /*width: 0;宽度为0隐藏*/
    overflow: auto;
  }
  .table-wrapper::-webkit-scrollbar {
    display: none;
  }
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 2px;
    height: 50px;
    background: #eee;
  }
  .el-table__body-wrapper::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.4);
  }
</style>
<script>
import { getPage } from '@/api/common'
import {mtRand} from '@/utils';
export default {
  props:{
    action:{
      type:String,
      required:true
    },
    scrollAction:{
      type:String,
      default(){
        return ''
      }
    },
    column:{
      type:Array,
      default(){
        return []
      }
    },
    height:{
      type:String,
      default(){
        return '500px';
      }
    }
  },
  data() {
    return {
      list: [],
      scrollT:null
    }
  },
  mounted() {
    this.getPage()
    //this.$refs.table.$refs.bodyWrapper.style.overflow = 'hidden';
  },
  methods: {
    getPage() {
      getPage(this.action,{page:1,row:10}).then(data=>{
        this.list = data.list;
        this.begin();
      })
    },
    begin(){
      this.tableMove();
      this.scrollT = setInterval(() =>{
        let num = mtRand(0,100);
        if (num > 80) {
          this.tableMove();
        }
      },1000)
    },
    tableMove(){
      // 48px 为表格行高
      let t = this.$refs.table.$refs.bodyWrapper;
      setTimeout(() =>{
        this.list.splice(10,1)
        t.style.transition = 'all .5s'
        t.style.paddingTop = '48px'
      },500)
      setTimeout(() =>{
        this.list.unshift(this.list[0])
        t.style.transition = 'all 0s ease 0s'
        t.style.paddingTop = '0'
      },1000)
    }
  }
}
</script>
